<template>
	<view class="all">
		<view class="top">
			我的推广人数
		</view>
		<view class="title">
			10
		</view>

		<u-tabs :list="list1" @change="tabs" :scrollable="false"></u-tabs>
		<view class="body">
			<view class="list flex_sp" v-for="(item , index) in 4" :key="index">
				<view class="box">
					<image class="img1" src="../../../static/index/分组 8@2x.png" mode=""></image>
					<view class="name">
						用户昵称
					</view>
				</view>
				<view class="right">
					<view class="top">
						以注册
					</view>
					<view class="bot">
						注册时间：2023-05-09 10:00:00
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [{
					name: '好友',
				}, {
					name: '护工',
				}],
				tab: 0
			};
		},
		methods: {
			tabs(e) {
				this.tab = e.index
			}
		}
	}
</script>

<style lang="scss" scoped>
	.all {
		padding: 15px;

		.top {
			font-size: 14px;
			font-weight: bold;
			color: #333333;
		}

		.title {
			font-size: 30px;
			font-weight: bold;
			color: #FB774B;
		}

		.body {
			.list {
				display: flex;
				align-items: center;
				border-bottom: 1px solid #eeeeee;
				padding: 10px 0;
				margin: 10px 0;

				.box {
					display: flex;
					align-items: center;

					font-size: 15px;
					font-weight: bold;
					color: #333333;

					.img1 {
						width: 48px;
						height: 48px;
						border-radius: 50%;
						margin-right: 5px;
					}
				}

				.right {
					.top {
						display: flex;
						align-items: center;
						justify-content: flex-end;

						font-size: 14px;

						font-weight: 400;
						color: #333333;
						margin: 5px 0;

					}

					.bot {
						margin: 5px 0;
						font-size: 12px;
						font-weight: 400;
						color: #999999;
					}
				}
			}
		}
	}
</style>